<template>
  <div class="list-nav">
    <div class="list-nav-wrap" ref="listNavWrap">
      <div class="inner-wrap">
        <div
          v-for="(item, index) in listNav" :key="index"
          @click="handleClick(index)"
          class="list-nav-item"
          :class="index === navIndex ? 'active' : ''"
        >{{item}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {
  data () {
    return {
      listNav: ['小米手机', 'Redmi手机', '黑鲨手机', '5G合约', '小米众筹', '电视', '大家电', '电脑办公', '路由器', '生活家电', '厨房电器', '只能穿戴', '车载出行', '个护健康', '数码配件', '日用百货', '有品精选', '小米服务', '米粉卡', '零售店', '其它'],
      navIndex: 0
    }
  },
  methods: {
    handleClick (index) {
      this.navIndex = index
    }
  },
  mounted () {
    /* eslint-disable no-new */
    new Bscroll(this.$refs.listNavWrap, {
      mouseWheel: true,
      bounce: false
    })
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/mixin';
.list-nav {
  width: px2rem(150 / 2);
  padding-top: px2rem(10);
  position: relative;
  background-color: #fff;
  box-sizing: border-box;
  border-right: 1px solid #EFEFEF;
  .list-nav-wrap {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    .inner-wrap {
      padding-bottom: px2rem(200 / 2)
    }
  }
  .list-nav-item {
    text-align: center;
    color: #3c3c3c;
    line-height: px2rem(90 / 2);
    font-size: px2rem(24 / 2);
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 px2rem(20 / 2);
  }
  .active {
    color: #fb7434;
    font-size: px2rem( 30 / 2);
    padding: 0;
  }
}
</style>
